<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('下级用户')" />
    <script type="text/javascript" src="/echarts/echarts.min.js" ></script>
</head>
<body class="white-bg">
    <input id="memberId" name="memberId" type="hidden" th:value="${member?.id}"/>
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
       <div id="ehcarts" style="width: 100%;height: 700px;"></div>
    </div>
    <th:block th:include="include :: footer" />
    <script type="text/javascript">
        var prefix = ctx + "system/member";
        $(function() {
            var memberId = $('#memberId').val();
            var url = prefix + "/echartsData/"+memberId;
            $.get(url, function(data) {
                //console.log(data);
                getEcharts(data.listdata,data.linksdata,data.categories);
            });

        });

        function getEcharts(listdata,linksdata,categories){
            myChart = echarts.init(document.getElementById('ehcarts'));
            option = {
                tooltip: {
                    //formatter: '{b}'
                    formatter: function(params){
                        var t = params.data;
                        if(t.name!=null){
                            return '昵称：'+t.name+'<br/>真实姓名：'+(t.realName!=null?t.realName:'');
                        }else{
                            return t.sourceName+'>'+t.targetName;
                        }
                    }
                },
                backgroundColor: '#EFEFEF',
                legend: {
                    show : true,
                    data : categories,
                    top: 20,
                },
                animationDuration: 0,
                animationEasingUpdate: 'quinticInOut',
                toolbox: {
                    top:"top",
                    right:"20",
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [{
                    type: 'graph',
                    layout: 'force',
                    force: {
                        repulsion: 300,
                        gravity: 0.1,
                        edgeLength: 100,
                        layoutAnimation: true,
                    },

                    roam: true,
                    hoverAnimation: true,
                    focusNodeAdjacency: true,
                    symbolSize: 33,
                    edgeSymbol : ['', 'arrow'],
                    edgeSymbolSize : 5,
                    data: listdata,
                    links: linksdata,
                    categories: categories,
                    label: {
                        normal: {
                            show: true,
                            position: 'bottom',
                            formatter: '{b}',
                            fontSize: 14,
                            fontStyle: '600',
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            borderWidth: 3
                        },
                        lineStyle: {
                            color: '#fff',
                            width: 3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#fff",
                            borderWidth: 1,
                            //shadowBlur: 10,
                            //shadowColor: "rgba(0, 0, 0, 0.3)"
                        }
                    },
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1.5,
                            curveness: 0
                        }
                    }
                }]
            };

            myChart.setOption(option);
        }
    </script>
</body>
</html>